<template>
    <div id="package">
        <c-title :hide="false" text="活动套餐"></c-title>
        <div ref="cont" class="cont">
        <div v-if="goodsList.length != 0" class="listBox">
            <div class="listWarp">
                <div v-for="(item, index) in goodsList" :key="item.id" class="listItem" @click="godetails(item.id)"
                    :style="index % 2 == 1 ? 'float:right' : ''">
                    <img :src="item.thumb" class="goodsImg" />
                    <div class="goodsName">
                        {{ item.title }}
                    </div>
                    <div class="goodscouponbox">
                        <div class="goodscouponItem1">
                            <div class="goodscouponItem1L">领劵</div>
                            <div class="goodscouponItem1R">满200减10</div>
                        </div>
                        <div class="goodscouponItem2">
                            限时抢
                        </div>
                    </div>
                    <div class="goodsprice">
                        <div style="float: left;">
                            <span class="goodspriceFH">¥</span>
                            {{ item.price }}
                        </div>
                        <div style="float: left;color: #666666;font-size:0.5rem;line-height: 0.75rem;margin-left:0.5rem;">
                            <span class="goodspriceFH">¥</span>
                            {{ item.price }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div v-if="showNodata && goodsList.length == 0" class="zlnodata">
            <img src="../assets/images/carImg/zlnodata.png" class="nodata"/>
            <div class="text">暂无数据</div>
        </div>
    </div>
    </div>
</template>
<script>
import {
  Toast
} from 'vant';
export default {
    data() {
        return {
            goodsList:[],
            page:1,
            contHeight:null,
            scrollOnoff:true,
            total:null,
            showNodata: false
        };
    },
    created() {

    },
    activated() {
        this.goodsList = []
        this.page = 1
        this.contHeight = null
        this.scrollOnoff=true
        this.total=null
        this.showNodata = false
        this.getGoodsList()
        window.addEventListener("scroll", this.handleScroll);
    },
    deactivated() {
        window.removeEventListener("scroll", this.handleScroll);
    },
    methods: {
        handleScroll() {
            if(!this.scrollOnoff){
                return false
            }
            
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            let viewportHeight = window.innerHeight;
            console.log(parseInt(this.contHeight - (scrollTop + viewportHeight)))
            if(this.contHeight && (parseInt(this.contHeight - (scrollTop + viewportHeight))) == 10 ){
                if(this.total && this.total == this.goodsList.length){
                    Toast('没有更多的商品啦！');
                    return false
                }
                this.scrollOnoff = false
                this.page += 1
                console.log(this.page)
                this.getGoodsList()
            }
        },
        getGoodsList(){
        let url = "goods.goods.searchGoods";
        let json = {'search' : {'category_name' : '套餐'},'page':this.page};
        // let json = {"search" : '','page':this.page};
        $http.post(url, json).then(response => {
            console.log(response)
            if(response.result==1){
                this.total = response.data.total
                this.goodsList = this.goodsList.concat(response.data.data)
                this.$nextTick(()=>{
                    const element = this.$refs.cont;
                    const height = element.offsetHeight; // 或者使用其他的属性，如clientHeight、scrollHeight等
                    console.log('Element height:', height);
                    this.contHeight = height + 50
                    this.scrollOnoff = true
                    this.showNodata = true
                })
            } else {
                this.showNodata = true
                Toast(response.msg);
            }
        })
        },
        godetails(id){
            this.$router.push(this.fun.getUrl("goods", { id: id }));
        },
    },
    components: {

    }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.cont{
      width: 100%;
      padding: 0 3.2%;
      box-sizing: border-box;
      overflow-y: auto;
      .zlnodata{
            width: 118px;
            height: auto;
            margin:200px auto 0;
            .nodata{
              width: 100%;
              display: block;
            }
            .text{
              font-size: 0.875rem;
              line-height: 2rem;
              color: #333;
              text-align: center;
            }
          }
    .listBox{
        .listWarp{
          width: 100%;
          height: auto;
          overflow: hidden;
          margin-top:10px;
          .listItem{
            width: 48.43%;
            height: auto;
            border-radius: 0.5rem;
            overflow: hidden;
            margin-bottom: 0.75rem;
            background: #fff;
            float: left;
            .goodsImg{
              width: 10.625rem;
              height: 10.625rem;
              display: block;
            }
            .goodsName{
              width: 100%;
              padding: 0 0.5rem;
              margin-top: 0.5rem;
              font-weight: 500;
              font-size: 0.75rem;
              color: #212121;
              line-height: 1.125rem;
              text-align: left;
            }
            .goodscouponbox{
              width: 100%;
              height: 0.875rem;
              padding: 0 0.5rem;
              margin-top: 0.25rem;
              .goodscouponItem1{
                width: 4.375rem;
                height: 0.875rem;
                border-radius: 0.125rem;
                border: 1px solid #FB1622;
                margin-right: 0.25rem;
                float: left;
                .goodscouponItem1L{
                  width: 1.375rem;
                  height: 100%;
                  float: left;
                  font-size: 0.5rem;
                  text-align: center;
                  line-height: 0.875rem;
                  color: #FB1622;
                  background: #FFE8E6;
                  border-right: 1px dashed #FB1622;
                }
                .goodscouponItem1R{
                  width: auto;
                  height: 100%;
                  margin-left: 1.375rem;
                  font-size: 0.5rem;
                  text-align: center;
                  line-height: 0.875rem;
                  color: #FB1622;
                }
              }
              .goodscouponItem2{
                width: 2.125rem;
                height: 0.875rem;
                border-radius: 0.125rem;
                background: #FFE8E6;
                font-size: 0.5rem;
                text-align: center;
                line-height: 0.875rem;
                color: #FB1622;
                float: left;
              }
            }
            .goodsprice{
              width: 100%;
              padding: 0 0.5rem;
              margin-top: 0.5rem;
              margin-bottom: 0.5rem;
              font-weight: 600;
              font-size: 0.65rem;
              color: #FB1622;
              // line-height: 1.125rem;
              text-align: left;
              overflow: hidden;
              .goodspriceFH{
                font-size: 0.5rem;
              }
            }
          }
        }
      }
    }
</style>
  